<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter :filter="filter" v-bind="$attrs" />
        <ActionBar v-if="!forSelection" :refresh="refresh" v-bind="$attrs" />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column v-if="!forSelection" label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-dropdown trigger="click">
              <el-button type="text" size="mini">
                操作<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button title="盘点任务" type="text" size="mini" icon="el-icon-notebook-2" @click="showResult(row.id)">任务管理</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button v-if="row.status === 'created' && row.dutyItems.length > 0 " title="下发任务" type="text" size="mini" icon="el-icon-s-promotion" @click="confirm(row.id)">下发任务</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button v-if="row.status ==='created'" title="编辑" type="text" size="mini" icon="el-icon-edit" @click="edit(row.id)">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;辑</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button v-if="row.status === 'created'" title="删除" type="text" size="mini" icon="el-icon-delete" @click="remove(row.id)">删&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button v-if="row.status !== 'created' && row.status !== 'finish'" title="完成计划" type="text" size="mini" icon="el-icon-finished" @click="donePlan(row.id)">完成</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </PageableTable>
      <FormDialog title="编辑" :show.sync="dialogFormVisible" width="40%" @on-ok="ok" @on-cancel="cancel">
        <EditForm :id="editId" ref="editForm" :belongs="belongs" />
      </FormDialog>
      <FormDialog title="任务下发确认" :show.sync="dialogConfirmFormVisible" @on-ok="confirmOk" @on-cancel="confirmCancel">
        <ConfirmForm :id="confirmId" ref="confirmForm" />
      </FormDialog>
      <FormDialog title="完成计划" :show.sync="dialogDoneFormVisible" @on-ok="doneOk" @on-cancel="doneCancel">
        <DoneForm :id="doneId" ref="doneForm" />
      </FormDialog>
      <ViewDialog
        v-if="dialogForViewTasksVisible"
        title="任务列表"
        :show.sync="dialogForViewTasksVisible"
        :drawer="true"
        width="80%"
        cancel-text="关闭"
        @on-cancel="closeViewTaskDialog"
      >
        <InventoryDuty :plan-id="currentPlanId" :belongs="belongs" />
      </ViewDialog>
    </div>
  </div>
</template>

<script>
// secondary package based on el-pagination
import FormDialog from '@neu/biz-core/components/FormDialog'
// import SelectDialog from '@neu/biz-core/components/SelectDialog'
import ViewDialog from '@neu/biz-core/components/ViewDialog'
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import ConfirmForm from './components/confirmForm'
import DoneForm from './components/doneForm'
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import belongs from '@neu/dcam-ui/mixins/belongs'
import { formatDate } from '@neu/biz-core/utils/utils'
import InventoryDuty from '@neu/dcam-ui/views/inventoryDuty/tables'
import { INVENTORY_PLAN_STATUS as STATUS } from '@neu/dcam-ui/utils/constants'

import {
  page,
  remove
} from '@neu/dcam-ui/api/inventoryPlan'
export default {
  name: 'InventoryPlanPage',
  components: {
    TableFilter,
    FormDialog,
    EditForm,
    ActionBar,
    PageableTable,
    ConfirmForm,
    DoneForm,
    InventoryDuty,
    ViewDialog
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind, belongs],
  props: {
    forSelection: {
      type: Boolean,
      default: false
    },
    status: {
      type: Boolean,
      default: null
    }
  },
  data() {
    return {
      r: page,
      d: remove,
      insideColumns: [
        { title: '计划编号', key: 'code', sortable: 'custom' },
        { title: '计划名称', key: 'name', sortable: 'custom' },
        { title: '总任务数', key: 'tasksNum',
          render: (h, params) => {
            return h('span', params.row.dutyItems.length)
          }
        },
        { title: '已完成任务数', key: 'doneTasksNum',
          render: (h, params) => {
            const filterData = params.row.dutyItems ? params.row.dutyItems.filter(ele => ele.status === 'finish') : []
            return h('span', filterData.length)
          }
        },
        { title: '创建人', key: 'userName', sortable: 'custom' },
        { title: '更新时间', key: 'updateTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.updateTime)) } },
        { title: '状态', key: 'status', sortable: 'custom',
          render: (h, params) => {
            return h('span', [
              h('el-tag', STATUS[params.row.status])
            ])
          }
        }
      ],
      // 编辑的弹窗
      dialogFormVisible: false,
      // 下发的弹窗
      dialogConfirmFormVisible: false,
      // 完成计划的弹窗
      dialogDoneFormVisible: false,
      // 上传弹窗
      dialogUpdateConfirmFormVisible: false,
      currentPlanId: '',
      dialogForViewTasksVisible: false,
      editId: -1,
      confirmId: -1,
      doneId: -1
    }
  },
  watch: {
    dialogForViewTasksVisible: function(newVal, oldVal) {
      if (newVal === false) {
        this.refresh()
      }
    }
  },
  created() {
    this.searchObj.s_belongs = this.belongs
    this.filter(this.searchObj)
  },
  methods: {
    // 表格编辑按钮点击事件处理
    edit(id) {
      // 打开对话框
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.editId = id
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    },
    confirmOk() {
      this.$refs.confirmForm.onOk().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '下发成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogConfirmFormVisible = false
      })
    },
    confirmCancel() {
      this.confirmId = -1
      // 关闭对话框
      this.dialogConfirmFormVisible = false
    },
    doneOk() {
      this.$refs.doneForm.onOk().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '完成计划成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogDoneFormVisible = false
      })
    },
    doneCancel() {
      this.doneId = -1
      // 关闭对话框
      this.dialogDoneFormVisible = false
    },
    // 跳转任务页面
    addDuty(row) {
      this.$router.push({ name: 'dcam_inventoryDuty', query: { planId: row.id, status: row.status }})
    },
    // 下发确认
    confirm(id) {
      // 打开对话框
      this.dialogConfirmFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.confirmId = id
    },
    // 跳转详细页面
    showResult(id) {
      this.currentPlanId = id
      this.dialogForViewTasksVisible = true
    },
    // 跳转详细页面
    donePlan(id) {
      // 打开对话框
      this.dialogDoneFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.doneId = id
    },
    closeViewTaskDialog() {
      this.dialogForViewTasksVisible = false
    }
  }
}
</script>
